<template>
	<div class="map-container">
		<!-- 顶部导航 -->
		<div class="header">
			<div class="back-btn" @click="goBack">
				<text>← 返回</text>
			</div>
			<text class="title">任务地图</text>
			<div class="legend-btn" @click="toggleLegend">
				<text>图例</text>
			</div>
		</div>

		<!-- 地图区域 -->
		<div class="map-area">
			<!-- 地图背景 -->
			<image class="map-background" 
				   :src="currentMap.background" 
				   mode="aspectFit"
				   @load="onMapLoad"></image>

			<!-- 任务标记点 -->
			<div class="quest-markers">
				<div class="quest-marker" 
					  v-for="marker in questMarkers" 
					  :key="marker.id"
					  :style="getMarkerStyle(marker)"
					  :class="getMarkerClass(marker)"
					  @click="selectMarker(marker)">
					<div class="marker-icon">
						<text>{{ getMarkerIcon(marker.type) }}</text>
					</div>
					<div class="marker-pulse" v-if="marker.status === 'active'"></div>
				</div>
			</div>

			<!-- 玩家位置 -->
			<div class="player-marker" :style="getPlayerStyle()">
				<div class="player-icon">
					<text>🧙‍♂️</text>
				</div>
				<div class="player-pulse"></div>
			</div>

			<!-- 路径线 -->
			<svg class="path-lines" v-if="showPath">
				<path v-for="path in questPaths" 
					  :key="path.id"
					  :d="path.d" 
					  stroke="#1890ff" 
					  stroke-width="3" 
					  fill="none" 
					  stroke-dasharray="10,5"
					  class="quest-path">
				</path>
			</svg>
		</div>

		<!-- 地图控制 -->
		<div class="map-controls">
			<div class="zoom-controls">
				<div class="zoom-btn" @click="zoomIn">
					<text>+</text>
				</div>
				<div class="zoom-btn" @click="zoomOut">
					<text>-</text>
				</div>
			</div>
			<div class="location-btn" @click="centerPlayer">
				<text>📍</text>
			</div>
			<div class="path-btn" @click="togglePath" :class="{ active: showPath }">
				<text>🗺️</text>
			</div>
		</div>

		<!-- 任务信息面板 -->
		<div class="quest-panel" v-if="selectedMarker">
			<div class="panel-header">
				<text class="quest-name">{{ selectedMarker.name }}</text>
				<div class="close-btn" @click="closePanel">
					<text>×</text>
				</div>
			</div>
			<div class="panel-content">
				<div class="quest-info">
					<text class="quest-type">{{ selectedMarker.quest_type }}</text>
					<text class="quest-level">Lv.{{ selectedMarker.level }}</text>
				</div>
				<text class="quest-desc">{{ selectedMarker.description }}</text>
				<div class="location-info">
					<text class="location-name">📍 {{ selectedMarker.location }}</text>
					<text class="distance">距离: {{ selectedMarker.distance }}米</text>
				</div>
			</div>
			<div class="panel-actions">
				<div class="action-btn navigate" @click="navigateToQuest">
					<text>前往</text>
				</div>
				<div class="action-btn details" @click="viewQuestDetails">
					<text>详情</text>
				</div>
			</div>
		</div>

		<!-- 图例面板 -->
		<div class="legend-panel" v-if="showLegend">
			<div class="legend-header">
				<text>地图图例</text>
				<div class="close-btn" @click="toggleLegend">
					<text>×</text>
				</div>
			</div>
			<div class="legend-content">
				<div class="legend-item" v-for="item in legendItems" :key="item.type">
					<div class="legend-icon" :class="item.class">
						<text>{{ item.icon }}</text>
					</div>
					<text class="legend-label">{{ item.label }}</text>
				</div>
			</div>
		</div>

		<!-- 小地图 -->
		<div class="minimap" v-if="showMinimap">
			<div class="minimap-content">
				<image class="minimap-bg" :src="currentMap.minimap" mode="aspectFit"></image>
				<div class="minimap-player" :style="getMinimapPlayerStyle()"></div>
				<div class="minimap-viewport" :style="getMinimapViewportStyle()"></div>
			</div>
		</div>

		<!-- 加载状态 -->
		<div class="loading" v-if="loading">
			<text>加载地图中...</text>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			currentMap: {
				id: 'map_001',
				name: '江南地区',
				background: '/static/maps/jiangnan.jpg',
				minimap: '/static/maps/jiangnan_mini.jpg',
				width: 2000,
				height: 1500
			},
			questMarkers: [],
			playerPosition: { x: 50, y: 50 }, // 百分比位置
			selectedMarker: null,
			showLegend: false,
			showPath: false,
			showMinimap: true,
			loading: false,
			zoomLevel: 1,
			mapOffset: { x: 0, y: 0 },
			questPaths: [],
			legendItems: [
				{ type: 'main', icon: '⭐', label: '主线任务', class: 'main-quest' },
				{ type: 'side', icon: '❗', label: '支线任务', class: 'side-quest' },
				{ type: 'daily', icon: '📅', label: '日常任务', class: 'daily-quest' },
				{ type: 'completed', icon: '✅', label: '已完成', class: 'completed-quest' },
				{ type: 'npc', icon: '👤', label: 'NPC', class: 'npc-marker' },
				{ type: 'shop', icon: '🏪', label: '商店', class: 'shop-marker' },
				{ type: 'teleport', icon: '🌀', label: '传送点', class: 'teleport-marker' }
			]
		}
	},
	onLoad() {
		this.loadMapData()
	},
	methods: {
		// 加载地图数据
		async loadMapData() {
			this.loading = true
			try {
				// 模拟任务标记数据
				this.questMarkers = [
					{
						id: 'quest_001',
						name: '探寻武穆遗书',
						type: 'main',
						quest_type: '主线',
						level: 35,
						status: 'active',
						x: 75, // 百分比位置
						y: 30,
						location: '铁掌峰',
						description: '前往铁掌峰，从裘千仞手中夺回武穆遗书',
						distance: 1200
					},
					{
						id: 'quest_002',
						name: '寻找黄药师',
						type: 'side',
						quest_type: '支线',
						level: 30,
						status: 'available',
						x: 25,
						y: 60,
						location: '桃花岛',
						description: '前往桃花岛寻找黄药师，学习奇门遁甲',
						distance: 800
					},
					{
						id: 'npc_001',
						name: '洪七公',
						type: 'npc',
						quest_type: 'NPC',
						level: 0,
						status: 'available',
						x: 60,
						y: 80,
						location: '醉仙楼',
						description: '丐帮帮主，可以传授降龙十八掌',
						distance: 500
					}
				]

				// 生成任务路径
				this.generateQuestPaths()
			} catch (error) {
				console.error('加载地图数据失败:', error)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},

		// 生成任务路径
		generateQuestPaths() {
			const activeQuests = this.questMarkers.filter(m => m.status === 'active')
			this.questPaths = activeQuests.map(quest => {
				return {
					id: `path_${quest.id}`,
					d: `M ${this.playerPosition.x}% ${this.playerPosition.y}% L ${quest.x}% ${quest.y}%`
				}
			})
		},

		// 获取标记样式
		getMarkerStyle(marker) {
			return {
				left: marker.x + '%',
				top: marker.y + '%',
				transform: `translate(-50%, -50%) scale(${this.zoomLevel})`
			}
		},

		// 获取标记类名
		getMarkerClass(marker) {
			return {
				[`${marker.type}-quest`]: true,
				[`status-${marker.status}`]: true,
				selected: this.selectedMarker && this.selectedMarker.id === marker.id
			}
		},

		// 获取标记图标
		getMarkerIcon(type) {
			const icons = {
				main: '⭐',
				side: '❗',
				daily: '📅',
				npc: '👤',
				shop: '🏪',
				teleport: '🌀'
			}
			return icons[type] || '❓'
		},

		// 获取玩家位置样式
		getPlayerStyle() {
			return {
				left: this.playerPosition.x + '%',
				top: this.playerPosition.y + '%',
				transform: `translate(-50%, -50%) scale(${this.zoomLevel})`
			}
		},

		// 获取小地图玩家位置
		getMinimapPlayerStyle() {
			return {
				left: this.playerPosition.x + '%',
				top: this.playerPosition.y + '%'
			}
		},

		// 获取小地图视窗位置
		getMinimapViewportStyle() {
			return {
				left: '25%',
				top: '25%',
				width: '50%',
				height: '50%'
			}
		},

		// 选择标记
		selectMarker(marker) {
			this.selectedMarker = marker
		},

		// 关闭面板
		closePanel() {
			this.selectedMarker = null
		},

		// 切换图例
		toggleLegend() {
			this.showLegend = !this.showLegend
		},

		// 切换路径显示
		togglePath() {
			this.showPath = !this.showPath
		},

		// 放大地图
		zoomIn() {
			if (this.zoomLevel < 3) {
				this.zoomLevel += 0.2
			}
		},

		// 缩小地图
		zoomOut() {
			if (this.zoomLevel > 0.5) {
				this.zoomLevel -= 0.2
			}
		},

		// 居中玩家
		centerPlayer() {
			// 重置地图偏移，使玩家居中
			this.mapOffset = { x: 0, y: 0 }
			uni.showToast({
				title: '已居中玩家位置',
				icon: 'none'
			})
		},

		// 前往任务
		navigateToQuest() {
			if (this.selectedMarker) {
				uni.showModal({
					title: '前往任务',
					content: `确定要前往${this.selectedMarker.location}吗？`,
					success: (res) => {
						if (res.confirm) {
							// 模拟自动寻路
							uni.showToast({
								title: '开始自动寻路',
								icon: 'success'
							})
							this.closePanel()
						}
					}
				})
			}
		},

		// 查看任务详情
		viewQuestDetails() {
			if (this.selectedMarker && this.selectedMarker.type !== 'npc') {
				uni.navigateTo({
					url: `/pages/quest/detail?id=${this.selectedMarker.id}`
				})
			}
		},

		// 地图加载完成
		onMapLoad() {
			// 地图加载完成
		},

		// 返回上一页
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

<style scoped>
.map-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-color: #f0f0f0;
}

.header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	z-index: 10;
	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
}

.back-btn, .legend-btn {
	font-size: 28rpx;
	padding: 10rpx 20rpx;
	border-radius: 8rpx;
	background-color: rgba(255,255,255,0.2);
}

.title {
	font-size: 36rpx;
	font-weight: bold;
}

.map-area {
	position: absolute;
	top: 100rpx;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}

.map-background {
	width: 100%;
	height: 100%;
}

.quest-markers {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.quest-marker {
	position: absolute;
	width: 80rpx;
	height: 80rpx;
	pointer-events: auto;
	cursor: pointer;
	transition: all 0.3s;
}

.quest-marker:active {
	transform: translate(-50%, -50%) scale(1.2);
}

.quest-marker.selected {
	transform: translate(-50%, -50%) scale(1.3);
}

.marker-icon {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 40rpx;
	box-shadow: 0 4rpx 15rpx rgba(0,0,0,0.3);
	border: 4rpx solid white;
}

.main-quest .marker-icon {
	background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
}

.side-quest .marker-icon {
	background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
}

.daily-quest .marker-icon {
	background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
}

.npc-marker .marker-icon {
	background: linear-gradient(135deg, #722ed1 0%, #9254de 100%);
}

.shop-marker .marker-icon {
	background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);
}

.teleport-marker .marker-icon {
	background: linear-gradient(135deg, #eb2f96 0%, #f759ab 100%);
}

.marker-pulse {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: rgba(24, 144, 255, 0.3);
	transform: translate(-50%, -50%);
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -50%) scale(2);
		opacity: 0;
	}
}

.player-marker {
	position: absolute;
	width: 60rpx;
	height: 60rpx;
	z-index: 5;
}

.player-icon {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30rpx;
	background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
	border: 3rpx solid white;
	box-shadow: 0 4rpx 15rpx rgba(0,0,0,0.3);
}

.player-pulse {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: rgba(255, 77, 79, 0.3);
	transform: translate(-50%, -50%);
	animation: pulse 1.5s infinite;
}

.path-lines {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
}

.quest-path {
	animation: dash 3s linear infinite;
}

@keyframes dash {
	to {
		stroke-dashoffset: -30;
	}
}

.map-controls {
	position: absolute;
	right: 30rpx;
	bottom: 200rpx;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.zoom-controls {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.zoom-btn, .location-btn, .path-btn {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background: rgba(255,255,255,0.9);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	box-shadow: 0 4rpx 15rpx rgba(0,0,0,0.2);
	transition: all 0.3s;
}

.zoom-btn:active, .location-btn:active, .path-btn:active {
	transform: scale(0.9);
	background: rgba(255,255,255,0.7);
}

.path-btn.active {
	background: #1890ff;
	color: white;
}

.quest-panel {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	border-radius: 20rpx 20rpx 0 0;
	box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.1);
	z-index: 10;
	max-height: 60vh;
	overflow: hidden;
}

.panel-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.quest-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.close-btn {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	background-color: #f5f5f5;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 40rpx;
	color: #666;
}

.panel-content {
	padding: 30rpx;
}

.quest-info {
	display: flex;
	gap: 15rpx;
	margin-bottom: 15rpx;
}

.quest-type {
	font-size: 22rpx;
	padding: 4rpx 12rpx;
	background-color: #f0f0f0;
	border-radius: 10rpx;
	color: #666;
}

.quest-level {
	font-size: 22rpx;
	padding: 4rpx 12rpx;
	background-color: #e6f7ff;
	border-radius: 10rpx;
	color: #1890ff;
}

.quest-desc {
	font-size: 28rpx;
	color: #666;
	line-height: 1.5;
	margin-bottom: 20rpx;
}

.location-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15rpx;
	background-color: #f8f9fa;
	border-radius: 12rpx;
}

.location-name {
	font-size: 26rpx;
	color: #333;
	font-weight: bold;
}

.distance {
	font-size: 24rpx;
	color: #666;
}

.panel-actions {
	display: flex;
	gap: 20rpx;
	padding: 30rpx;
	padding-top: 20rpx;
}

.action-btn {
	flex: 1;
	padding: 25rpx;
	border-radius: 12rpx;
	text-align: center;
	transition: transform 0.2s;
}

.action-btn.navigate {
	background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
	color: white;
}

.action-btn.details {
	background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
	color: white;
}

.action-btn:active {
	transform: scale(0.95);
}

.action-btn text {
	font-size: 28rpx;
	font-weight: bold;
}

.legend-panel {
	position: absolute;
	top: 120rpx;
	right: 30rpx;
	width: 300rpx;
	background: white;
	border-radius: 15rpx;
	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
	z-index: 10;
}

.legend-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.legend-header text {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
}

.legend-content {
	padding: 20rpx;
}

.legend-item {
	display: flex;
	align-items: center;
	gap: 15rpx;
	margin-bottom: 15rpx;
}

.legend-icon {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20rpx;
	border: 2rpx solid white;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2);
}

.legend-label {
	font-size: 24rpx;
	color: #333;
}

.minimap {
	position: absolute;
	top: 120rpx;
	left: 30rpx;
	width: 200rpx;
	height: 150rpx;
	background: white;
	border-radius: 10rpx;
	box-shadow: 0 4rpx 15rpx rgba(0,0,0,0.2);
	z-index: 10;
	overflow: hidden;
}

.minimap-content {
	position: relative;
	width: 100%;
	height: 100%;
}

.minimap-bg {
	width: 100%;
	height: 100%;
}

.minimap-player {
	position: absolute;
	width: 8rpx;
	height: 8rpx;
	background-color: #ff4d4f;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.minimap-viewport {
	position: absolute;
	border: 2rpx solid #1890ff;
	background: rgba(24, 144, 255, 0.1);
	transform: translate(-50%, -50%);
}

.loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 20;
	padding: 40rpx;
	background: rgba(0,0,0,0.8);
	border-radius: 15rpx;
	color: white;
	font-size: 28rpx;
}
</style>